<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
    <div class="main_allScroll">
        <div class="noBusiness" v-if=" !addressList.addreList.content || addressList.addreList.content.length == 0">
            <div class="business_icon" style="margin-bottom: 0.75rem"></div>
            <span>您还没有收货地址</span>
        </div>
        <div class="item" v-for="item in addressList.addreList.content" :key="item.deliveryId " v-on:click="selectAddress(item)" v-else>
            <div class="item_t">
                <span>{{item.recipientsName}}</span>
                <span>{{item.recipientsMobilePhone}}</span>
            </div>
            <div class="item_c"><span v-if="item.isDefault !== 0">[默认地址]</span>{{item.recipientsProvince}}{{item.recipientsCity}}{{item.recipientsDistrict}}{{item.recipientsDetailAddress}}</div>
        </div>
    </div>
        <div class="foot_add" v-on:click="gotoPage()">
            <div slot="left" >
                <button class="btns">管理收货地址</button>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapActions,mapState} from 'vuex'
    import { GET_ADDRESS,SELECT_ADDRESS} from 'store/address'
    import { CheckIcon,Confirm,TransferDomDirective as TransferDom} from 'vux'
    import { queryDeliveriesInfo} from '../../api/my'
    export default {
        name: 'selectAddress',
        components: {
            CheckIcon,
            Confirm
        },
        directives: {
            TransferDom
        },
        data () {
            return {
                show:false,
                deleteID:'',
                pathQuery:""
            }
        },
        activated:function () {
            if(window.location.hash.indexOf('?') >= 0){
                this.pathQuery = window.location.hash.slice(window.location.hash.indexOf('?'));
            }else{
                let data = localStorage.getItem('pathQuery');
                if(data){
                    this.pathQuery = data;
                }
            }
            this.getaddressList();
        },
        deactivated:function () {
            localStorage.setItem("pathQuery",this.pathQuery)
        },
        methods:{
            ...mapActions([GET_ADDRESS,SELECT_ADDRESS]),
            gotoPage(){
              this.$router.push('/my/address')
            },
            getaddressList(){
                this.$ajax.address.queryDeliveriesInfo()
                    .then((res)=>{
                        this.GET_ADDRESS(res.body);
                    })

            },
            selectAddress(obj){
                this.SELECT_ADDRESS(obj);
                this.$router.goBack()
            }
        },
        computed: mapState({addressList:state=>state.address}),
    }
</script>
<style lang="less" scoped>
    @import "../../less/_variable.less";
    .main_allScroll{
        padding-bottom: 1rem;
        border-top: 1px solid #ebebeb;
    }
    .noBusiness{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-size: 0.36rem;
        color: #000;
    }
    .item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        align-content: flex-start;
        background: #fff;
        padding: 0.38rem 0.3rem 0.38rem;
        border-bottom: 1px solid #efefef;
        color: #343434;
        .item_t{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            font-size: 0.32rem;
            span:after{
                font-size: 0.28rem;
            }
        }
        .item_c{
            font-size: 0.28rem;
            margin: 0.36rem 0 0;
            line-height: 1.5;
            span{
                color: @c_lordColor;
            }
        }
    }
</style>